<template>
    <div style="height: 100%; width: 100%; position: relative">
        <div id="container" style="height: 100%; width: 100%; position: absolute"></div>
        <div class="input-card" style="height: 10%; position: relative; cursor: pointer; z-index: 2; float: left; padding: 85% 0px 0px 1%">
            <div class="input-item" id="pantoBtn" style="width: 100%; height: 100%; font-size: 50px">
                <i class="el-icon-aim"></i>
            </div>
        </div>
    </div>
</template>
<script >
import AMap from 'AMap';
import movecheck from '@/api/movecheck/movecheck';
export default {
    //初始化地图对象，加载地图
    data() {
        return {
            maplist: [],
            text: '',
            positions:[116.39, 39.9],
            mj:[]
        };
    },
    created() {
        
        this.$nextTick(()=>{
this.getmap()

})
    },
    methods: {
        // 传递数据
        getinfor() {
            var id = $('#idframe', window.parent.document).attr('data-id');
            this.getmap();
            movecheck.movecheck(id).then((res) => {});
        },
        // 渲染
        getmap() {
            const map = new AMap.Map('container', {
                resizeEnable: true,
                zoom: 10,
                center: [116.397428, 39.90923]
            });
            // 图形界面
            var path = [
        [116.169465,39.932670],
        [116.160260,39.924492],
        [116.186138,39.879817],
        [116.150625,39.710019],
        [116.183198,39.709920],
        [116.226950,39.777616],
        [116.421078,39.810771],
        [116.442621,39.799892],
        [116.463478,39.790066],
        [116.588276,39.809551],
        [116.536091,39.808859],
        [116.573856,39.839643],
        [116.706380,39.916740],
        [116.657285,39.934545],
        [116.600293,39.937770],
        [116.540039,39.937968],
        [116.514805,39.982375],
        [116.499935,40.013710],
        [116.546520,40.030443],
        [116.687668,40.129961],
        [116.539697,40.080659],
        [116.503390,40.058474],
        [116.468800,40.052578]
    ];

            var pos = this.positions;
            // 标点位置
            var marker = new AMap.Marker({
                position: new AMap.LngLat(pos[0], pos[1])
            });
            var polygon = new AMap.Polygon({
                map: map,
                fillOpacity: 0.4,
                path: path
            });
            var area = Math.round(AMap.GeometryUtil.ringArea(path));
            console.log(area);
            // 计算区域面积
            // var text = new AMap.Text({
            //     position: new AMap.LngLat(116.468800,40.052578),
            //     text: '区域面积'  + '平方米',
            //     offset: new AMap.Pixel(-20, -20)
            // })
            map.add(marker);
            map.setFitView();
            AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function () {
                map.panTo(pos);
            });
        }
    }
};
</script>
<style>
#container {
    height: 100%;
    width: 100%;
}
</style>